<template>
  <div class="bluetooth-controller">
    <el-pull-refresh v-model="isRefreshing" @refresh="handleRefresh">
      <div class="connection-status" :class="{ connected: isConnected }">
        <span class="status-dot"></span>
        {{ isConnected ? '已连接' : '未连接' }}
      </div>

      <div class="connect-section" v-if="!isConnected">
        <el-button type="primary" @click="connectBluetooth" :loading="isConnecting">
          {{ isConnecting ? '连接中...' : '连接设备' }}
        </el-button>
      </div>

      <div class="control-section" v-else>
        <div class="device-info">
          <h3>已连接设备：{{ deviceName }}</h3>
          <el-tag>{{ deviceStatus }}</el-tag>
        </div>

        <div class="control-buttons">
          <el-button 
            type="primary" 
            :disabled="isRecording"
            @click="startRecording">
            开始录制
          </el-button>
          
          <el-button 
            type="danger" 
            :disabled="!isRecording"
            @click="stopRecording">
            停止录制
          </el-button>

          <el-button 
            type="info" 
            :disabled="isRecording"
            @click="switchCamera">
            切换摄像头
          </el-button>

          <el-button 
            type="warning" 
            @click="getStatus">
            获取状态
          </el-button>
        </div>

        <div class="recording-info" v-if="isRecording">
          <el-tag type="danger">录制中</el-tag>
          <span class="recording-time">{{ recordingTime }}</span>
        </div>

        <div class="saved-videos" v-if="savedVideos.length > 0">
          <h4>已保存的视频：</h4>
          <ul>
            <li v-for="video in savedVideos" :key="video">{{ video }}</li>
          </ul>
        </div>
      </div>
    </el-pull-refresh>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'

const isConnected = ref(false)
const isConnecting = ref(false)
const isRefreshing = ref(false)
const isRecording = ref(false)
const deviceName = ref('')
const deviceStatus = ref('空闲')
const recordingTime = ref('00:00')
const savedVideos = ref([])
const characteristic = ref(null)
const device = ref(null)

// 处理下拉刷新
const handleRefresh = async () => {
  try {
    if (isConnected.value) {
      // 如果已连接，则刷新状态
      await getStatus()
      ElMessage.success('状态已更新')
    } else {
      // 如果未连接，则尝试连接
      await connectBluetooth()
    }
  } catch (error) {
    console.error('刷新错误:', error)
    ElMessage.error(`刷新失败: ${error.message}`)
  } finally {
    isRefreshing.value = false
  }
}

// ... 其他现有代码 ...
</script>

<style scoped>
.bluetooth-controller {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  min-height: calc(100vh - 40px); /* 确保有足够的高度可以下拉 */
}

/* ... 其他现有样式 ... */

:deep(.el-pull-refresh) {
  overflow: visible;
}

:deep(.el-pull-refresh__wrap) {
  min-height: calc(100vh - 40px);
}
</style> 